<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>处理dom</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            var addLi=$("<li class=\"test\">Item 新增</li>")

            $("button").eq(0).click(function () {
                $("ul").append(addLi.clone());
            })
            $("button").eq(1).click(function () {
                $("ul").prepend(addLi.clone());
            })
            $("button").eq(2).click(function () {
                $("ul").after(addLi.clone());
            })
            $("button").eq(3).click(function () {
                $("ul").before(addLi.clone());
            })
            //$("ul>li:first").replaceWith(addLi);
            //$("ul").remove(); //empty
        })

    </script>
</head>
<body>
<ul class="topnav">
    <li>Item 1</li>
    <li class="test">Item 2
    </li>
    <li class="test">Item 3</li>
</ul>
<button>内部结尾新增</button>
<button>内部开始新增</button>
<button>外部结尾新增</button>
<button>外部开始新增</button>
</body>
</html>